import { useEffect } from 'react'
import { Modal, NavBar, Icon, WingBlank, WhiteSpace, InputItem, Button } from 'antd-mobile'
import { Link } from 'react-router-dom'
import { createForm } from 'rc-form';

import './index.less'

const alert = Modal.alert;

function RegisterPhone(props) {
  // props就是父组件传递的props数据
  const { history, location, form: { getFieldDecorator } } = props;

  // useEffect 让工厂函数组件可以使用生命周期函数
  // 需求：只要执行一次，充当componentDidMount
  // useEffect(() => {
  //   alert(
  //     // 标题
  //     '注册协议及隐私政策',
  //     // 内容
  //     <span className="policy-content">
  //       在您注册成为硅谷用户的过程中，您需要完成我们的注册流程并通过点击同意的形式在线签署以下协议，
  //       <span className="policy-strong">请您务必仔细阅读、充分理解协议中的条款内容后再点击同意（尤其是以粗体并下划线标识的条款，因为这些条款可能会明确您应履行的义务或对您的权利有所限制）</span>
  //       <span className="policy-text">《硅谷用户注册协议》</span>
  //       <span className="policy-text">《硅谷隐私政策》</span>
  //     </span>,
  //     // 底部按钮
  //     [
  //       /*
  //         什么是路由组件？通过Route加载的组件
  //         路由组件会接收到Route传递的三个属性：location、history、match
  //           history.push()
  //           history.replace()
  //           history.go()
  //         工厂函数组件怎么接受props？工厂函数组件第一个参数，就是props
  //       */
  //       { text: '不同意', onPress: () => history.push('/login/code') },
  //       {
  //         text: '同意',
  //         // onPress: () => console.log('ok'), 
  //         style: {
  //           backgroundColor: '#e94f4f',
  //           color: '#fff'
  //         }
  //       },
  //     ]
  //   )
  //   // [] useEffect的依赖项，一旦数组里面发生变化就会重新调用
  //   // 空数组没有内容，不会发生任何变化，只会执行一次
  // }, [])

  /*
    跳转路由两种方式：
      1. Link / NavLink 路由链接导航
      2. history.push/replace() 编程式导航
      使用：
        如果只要进行路由跳转，一般用路由链接导航
        如果要进行一些其他操作，在进行路由跳转，用编程式导航
          比如：登陆，发送请求判断是否登陆成功，再跳转首页
  */

  const prefix = '+' + (location.state || '86')

  return (
    <div className="register-phone">
      <NavBar
        mode="light"
        icon={<Icon type="left" className="icon-left" />}
        onLeftClick={() => history.push('/login/code')}
      >硅谷注册</NavBar>
      <WingBlank size="lg">
        <WhiteSpace size="xl" />
        <InputItem
          className="input-item"
          placeholder="请输入手机号"
          clear
        >
          <Link to="/countryPicker" className="register-phone-prefix">
            <span>{prefix}</span>
            <Icon type="down" />
          </Link>
        </InputItem>
        <WhiteSpace size="xl" />
        <Button type="primary" disabled className="btn">下一步</Button>
      </WingBlank>
    </div>
  )
}

/*
  高阶组件：本质上是一个函数，函数接受组件作为参数，返回值是一个新组件
  作用：复用代码

  createForm 是一个高阶组件
  作用：复用表单校验的各种方法
  高阶组件包裹需要使用的组件，高阶组件负责给需要使用的组件传递props
  props里面就有高阶组件的方法

  NewComponent组件里面会渲染RegisterPhone组件（父子关系）
  NewComponent组件会以props方法给RegisterPhone组件传递数据form
  form是一个对象，里面就包含校验表单的方法
*/

// const NewComponent = createForm()(RegisterPhone)
// export default NewComponent
export default createForm()(RegisterPhone)